<template>
  <!-- 书写html结构 只可以有一个div 但是可以嵌套多个div -->
  <div>
    <el-row>
      <!-- title -->
      <el-col :span="4"> </el-col>
      <el-col :span="6">
        <div class="mod-btnbox">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-refresh-left"
            @click="refresh"
            >刷新</el-button
          >
        </div>
        <!--左侧树形菜单-->
        <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick">
        </el-tree>
      </el-col>
      <el-col :span="18">
        <el-dialog title="权限树" :visible.sync="dialogMenuTreeVisible">
          <el-tree
            :data="data"
            :props="defaultProps"
            show-checkbox
            check-strictly="true"
            ref="parentMenuTree">
          </el-tree>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="checkSelectNode"
              >确 定</el-button
            >
          </div>
        </el-dialog>

        <el-form ref="form" :model="form" label-width="80px">
          <el-input v-model="form.parentId" type="hidden"></el-input>
          <el-form-item label="菜单名称">
            <el-input v-model="form.label"></el-input>
          </el-form-item>
          <el-form-item label="父节点">
            <input type="hidden" name="form.parentId" />
            <el-button
              size="small"
              type="primary"
              @click="dialogMenuTreeVisible = true"
              >选择父节点</el-button
            ><span style="width: 30px; margin-left: 15px">{{
              form.parentName
            }}</span>
          </el-form-item>
          <el-form-item label="链接地址">
            <el-input v-model="form.url"></el-input>
          </el-form-item>
          <el-form-item label="菜单类型" :label-width="formLabelWidth">
            <el-radio v-model="form.menuType" label="M">目录</el-radio>
            <el-radio v-model="form.menuType" label="C">菜单</el-radio>
            <el-radio v-model="form.menuType" label="F">按钮</el-radio>
          </el-form-item>
           <el-form-item label="图标">
            <el-input v-model="form.icon"></el-input>
          </el-form-item>
          <el-form-item label="权限标识">
            <el-input v-model="form.perms"></el-input>
          </el-form-item>
          <el-form-item label="是否有效">
            <el-radio v-model="form.visible" label="0">启用</el-radio>
            <el-radio v-model="form.visible" label="1">禁用</el-radio>
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              @click="onSubmit"
              >添加</el-button
            >
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              @click="ongenxin"
              >更新</el-button
            >
            <el-button size="small" type="primary" @click="onDel"
            icon="el-icon-delete"
              >删除</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<!--书写组件配置项目  相当于写js代码的地方 -->
<script>
//数据 全是json格式
export default {
  //注册属性 父传子 数据传递
  props: {},
  data() {
    //定义数据
    return {
      dialogMenuTreeVisible: false, //弹出层，默认不显示
      data: [], //tree数据
      defaultProps: {
        //传参属性
        children: "children",
        label: "label",
      },
      form: {}, //form表单对象
    };
  },
  //初始化数据
  created: function () {
    //初始化方法 类似于jquery  $({})
    //让_this等于当前vue对象
    var _this = this;
    //初始化查询左侧树
    this.$http
      .post("/menu/queryTree") //指定请求的url及参数  get
      .then(function (response) {
        //正确返回对象的处理
        //JSON.stringify   把json转换为json字符串，方便查看
        console.log(JSON.stringify(response));
        //直接使用this 会指 this.$http对象  错误
        // this.tableData
        //判断返回值是否正确
        if (response.data.code == 200) {
          _this.data = response.data.data;
        }
      });
  },
  methods: {
    //校验选中节点数量
    checkSelectNode() {
      let nodes = this.$refs.parentMenuTree.getCheckedNodes();
      if (nodes.length > 1) {
        this.$message.error("只能选择一个节点。。。");
        return;
      }
      console.log(
        "一个节点：" + JSON.stringify(nodes) + "名称为：" + nodes[0].label
      );
      this.form.parentName = nodes[0].label;
      this.form.parentId = nodes[0].id;
      //关闭弹框
      this.dialogMenuTreeVisible = false;
      console.log("选中节点：" + JSON.stringify(this.form));
    },
    //定义所有元素绑定的方法
    //绑定点击事件
    handleNodeClick(data) {
      // console.log(JSON.stringify(data));
      // alert(JSON.stringify(data));
      //把当前节点json数据赋值给form
      this.form = data;
    },
    //更新或者添加提交
    onSubmit() {
      //alert(JSON.stringify(this.form));
      var _this = this;
      this.$http.put("/menu/add", this.form).then(function (response) {
        //正确返回对象的处理
        //JSON.stringify   把json转换为json字符串，方便查看
        console.log(JSON.stringify(response));
        //直接使用this 会指 this.$http对象  错误
        // this.tableData
        //判断返回值是否正确
        if (response.data.code == 200) {
          //提示添加成功
          _this.$message({
            message: "恭喜你，这是一条成功消息",
            type: "success",
          });
          //刷新整个页面
          location.reload();
        } else {
          //错误提示信息
          _this.$message.error("错了哦，这是一条错误消息");
        }
      });
    },
    //更新或者添加提交
    ongenxin() {
      //alert(JSON.stringify(this.form));
      var _this = this;
      this.$http
        .put("/menu/update", this.form) //指定请求的url及参数  get
        .then(function (response) {
          //正确返回对象的处理
          //JSON.stringify   把json转换为json字符串，方便查看
          console.log(JSON.stringify(response));

          //直接使用this 会指 this.$http对象  错误
          // this.tableData
          //判断返回值是否正确
          if (response.data.code == 200) {
            //提示添加成功
            _this.$message({
              message: "恭喜你，这是一条成功消息",
              type: "success",
            });
            //刷新整个页面
            location.reload();
          } else {
            //错误提示信息
            _this.$message.error("错了哦，这是一条错误消息");
          }
        });
    },
    //删除
    onDel() {
      //判断是否是叶子
      if (this.form.url == "" || this.form.url == null) {
        this.$message.error("该节点下还有子节点，不能删除！！！");
        return;
      }
      //确认框提示
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //让_this等于当前vue对象
          var _this = this;
          // alert(111);
          //赋值 this.$http官网代码  this.form =form:{deptName:'',description:'',status:1}
          this.$http
            .delete("/menu/deleteById?id=" + this.form.id) //指定请求的url及参数  get
            .then(function (response) {
              //正确返回对象的处理
              //JSON.stringify   把json转换为json字符串，方便查看
              console.log(JSON.stringify(response));
              //直接使用this 会指 this.$http对象  错误
              //判断返回值是否正确
              if (response.data.code == 200) {
                //提示添加成功
                _this.$message({
                  message: "恭喜你，这是一条成功消息",
                  type: "success",
                });
                //删除整个页面
                location.reload();
              } else {
                //错误提示信息
                _this.$message.error("错了哦，这是一条错误消息");
              }
            })
            .catch(function (error) {
              //错误的处理
              // handle error
              console.log(error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    refresh() {
      location.reload();
    },

    //校验选中节点数量
    checkSelectNode() {
      let nodes = this.$refs.parentMenuTree.getCheckedNodes();
      if (nodes.length > 1) {
        this.$message.error("只能选择一个节点。。。");
        return;
      }
      console.log(
        "一个节点：" + JSON.stringify(nodes) + "名称为：" + nodes[0].label
      );
      this.form.parentName = nodes[0].label;
      this.form.parentId = nodes[0].id;
      //关闭弹框
      this.dialogMenuTreeVisible = false;
      console.log("选中节点：" + JSON.stringify(this.form));
    },
  },
};
</script>
<style>
.user-search {
  margin-top: 20px !important;
}
.user-search td {
  margin-top: 20px !important;
}
.userRole {
  width: 100%;
}
.el-table__expanded-cell {
  padding: 0px !important;
  margin: 0px !important;
}
.modt-box {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #f0f2f5;
  text-align: center;
  color: #334157;
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 24px;
}
.mod-btnbox {
  margin-bottom: 20px;
}
.treeclass {
  border: 1px solid #f3f3f3;
  padding-top: 20px;
  padding-bottom: 20px;
}
.selectw {
  width: 100%;
}
</style>
